<template>
  <view class="cont" v-if="show">
    <view class="shuaxin" :style="{ transform: 'rotate(' + rotate + 'deg)' }" @click="refresh"></view>
    <view class="title">图形验证</view>
    <view class="imgWrap">
      <image class="img" :src="src"></image>
      <view class="over" :style="{ left: left + 'px', top: top + 'px' }"></view>
      <view class="smartImg" :style="{ left: sleft + 'px', top: stop + 'px' }">
        <image class="simg" :style="{ left: -left + 'px', top: -top + 'px' }" :src="src"></image>
      </view>
    </view>
    <view class="sliderBox" @touchend="sliderEnd">
      <movable-area class="sliderF">
        <movable-view :animation="true" class="sliderS" :x="sliderx" direction="horizontal" @change="startMove">
          <image class="icon" src="https://pic.bangbangtongcheng.com/static/right.png" mode=""></image>
        </movable-view>
      </movable-area>

      <view class="bgC">
        拖动左边滑块完成上方拼图
        <view class="bgC_left" :style="{ width: backLeft + 'px' }"></view>
      </view>
    </view>
    <view class="showMessage" :style="{ color: acColor }">
      {{ message }}
    </view>
  </view>
</template>

<script>
  export default {
    name: "ceshiSlider",
    props: {
      show: {
        type: Boolean,
        default: false,
      },
    },
    watch: {
      show() {
        this.random();
        this.acColor = "#333";
        this.message = "";
      },
    },
    data() {
      return {
        left: 0,
        top: 0,
        sleft: 0,
        sleftDefault: 0,
        stop: 0,
        sliderx: 0,
        backLeft: 0,
        bgC_color: "",
        message: "",
        acColor: "#333",
        src: "",
        rotateNum: 0,
        rotate: 0,
      };
    },
    mounted() {
      this.random();
    },
    methods: {
      random() {
        let imgLegth = 8;
        let ram = Math.random();
        this.left = Math.floor(80 * ram) + 140; //140-220
        this.top = this.stop = Math.floor(80 * ram) + 10;
        this.sleft = this.sleftDefault = Math.floor(70 * ram) + 10;
        // if (Math.floor(imgLegth * ram) == 8) {
        //   this.src = require(`../static/bg.jpg`);
        //   console.log(1);
        // } else {
        //   console.log(2);
        //   this.src = require(`https://pic.bangbangtongcheng.com/static/${Math.floor(imgLegth * ram) + 1}.jpg`);
        // }
        let numm = Math.round(Math.random() * 5 + 5);
        console.log(numm);
        if (numm == 5) {
          this.src = require(`../static/bg.jpg`);
        }
        if (numm == 6) {
          this.src = require(`../static/bg1.jpg`);
        }
        if (numm == 7) {
          this.src = require(`../static/bg2.jpg`);
        }
        if (numm == 8) {
          this.src = require(`../static/bg3.jpg`);
        }
        if (numm == 9) {
          this.src = require(`../static/bg1.jpg`);
        }
        if (numm == 10) {
          this.src = require(`../static/bg2.jpg`);
        }
        //下面的代码必须这样写才能让滑块回到原点，如果直接this.sliderx=0不起作用
        this.sliderx = 1;
        setTimeout(() => {
          this.sliderx = 0;
          this.refreshStatus = false;
        }, 300);
      },
      refresh() {
        let rotateNum = this.rotateNum++;
        this.rotate = rotateNum * 180;
        this.message = "";
        this.random();
      },
      startMove(e) {
        this.backLeft = e.detail.x + 18;
        this.sleft = this.sleftDefault + e.detail.x;
      },
      sliderEnd() {
        if (Math.abs(this.sleft - this.left) <= 4) {
          this.message = "验证成功!";
          this.acColor = "green";
          this.$emit("Handle", true);
        } else {
          this.message = "验证失败，请重试";
          this.acColor = "red";
          setTimeout(() => {
            this.message = "";
            this.sliderx = 1;
            setTimeout(() => {
              this.sliderx = 0;
            }, 300);
          }, 1000);
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  @mixin flexC {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cont {
    position: relative;
    background: #fff;
    width: 300px;
    border-radius: 8px;
    overflow: hidden;
    padding-bottom: 20px;

    .shuaxin {
      position: absolute;
      right: 20rpx;
      top: 30rpx;
      width: 60rpx;
      height: 60rpx;
      background: url(https://pic.bangbangtongcheng.com/static/reload.png) no-repeat;
      background-size: cover;
      transition: all 0.3s;
    }

    .title {
      width: 100%;
      height: 60px;
      font-size: 18px;
      color: #333;
      @include flexC;
    }

    .imgWrap {
      position: relative;
      width: 280px;
      height: 150px;
      border-radius: 8px;
      margin: 0 auto;
      overflow: hidden;
      background: #ddd;

      .img {
        display: block;
        width: 100%;
        height: 100%;
      }

      .over {
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 50px;
        background: #ddd;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
      }

      .smartImg {
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
        width: 50px;
        height: 50px;
        overflow: hidden;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);

        .simg {
          position: absolute;
          display: block;
          width: 280px;
          height: 150px;
          max-width: 280px;
        }
      }
    }
  }

  .sliderBox {
    width: 280px;
    margin: 10px auto 0;
    height: 36px;
    position: relative;

    .sliderF {
      width: 100%;
      height: 100%;
      z-index: 3;

      .sliderS {
        height: 36px;
        width: 36px;
        background: #64b6a8;
        border-radius: 36px;
        display: flex;
        justify-content: center;
        align-items: center;

        .icon {
          width: 50rpx;
          height: 50rpx;
          // transform: rotate(180deg);
        }
      }
    }

    .bgC {
      position: absolute;
      z-index: 1;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      height: 30px;
      border-radius: 30px;
      line-height: 30px;
      font-size: 14px;
      color: #999999;
      box-shadow: inset 0 0 4px #ccc;
      text-align: center;
      overflow: hidden;
    }

    .bgC_left {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 28px;
      border-top-left-radius: 28px;
      border-bottom-left-radius: 28px;
      line-height: 28px;
      font-size: 14px;
      background-color: #eee;
      box-shadow: inset 0 0 4px #ccc;
      text-align: center;
    }
  }

  .showMessage {
    text-align: center;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
  }
</style>